<script>
export default {
    name: "table_new",
    props: {
        request: Function,
        config: [Array, Object],
        propsTable: Object,
        options: Object,
        hasSelection: Boolean,
    },
    data() {
        return {
            form: {},
            tableData: [],
            page: 1,
            pageSize: 10,
            total: 0,
        };
    },
    methods: {
        async initData(val) {
            const res = await this.request({ ...val, page: this.page, pageSize: this.pageSize });
            this.tableData = res?.list;
            this.total = res?.total;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.initData();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.initData();
        },
        handleSelectionChange(val){
            this.$emit("selection", val);
        },
    },
    watch: {
        options: {
            handler: function (val) {
                this.initData(val);
            },
            deep: true
        }
    },
    mounted() {
        this.initData();
    },
    render() {
        return (
            <div class="tablecon">
                <el-table
                    header-cell-style={{ background: '#f0f0f0', color: '#606266' }}
                    data={this.tableData}
                    props={{ ...this.propsTable }}
                    on-selection-change={this.handleSelectionChange}
                    style="width: 100%">
                    {
                        this.hasSelection ? <el-table-column
                            type="selection"
                            width="55">
                        </el-table-column> : ""
                    }
                    {
                        this?.config?.length > 1 && this.config?.map(e =>
                            <el-table-column
                                props={{ ...e }}
                                scopedSlots={e?.render ? {
                                    default: e?.render
                                } : null}
                            >
                            </el-table-column>
                        )
                    }
                </el-table >
                <el-pagination
                    on-size-change={this.handleSizeChange}
                    on-current-change={this.handleCurrentChange}
                    background
                    class="pageLeft"
                    page-sizes={[10, 20, 50, 100]}
                    layout="total, ->, sizes, prev, pager, next, jumper"
                    total={this.total}>
                </el-pagination >
            </div >
        );
    },
};
</script>

<style scoped lang="scss">
@import url(./index.scss);

.tablecon {
    padding: 16px 32px;

    .pageLeft {
        margin-top: 18px;
    }
}
</style>

